<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>hello2</div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</body>
  <script>
  //  响应式原理

    let  o ={
      age:1,
      name:'zhangsnag',
      cour:{
        js:70,
        java:50,
        c:10
      },
      arr:[
        {
          name:"js"
        },
        {
          name:'java'
        }, {
          name:"c"
        }
      ]
    }
    const defineReactive = function(target,key,value,enmuerable){
      if(typeof value ==='Object' && value !=null && !Array.isArray(value)){
        // 非数组的引用类型
      }
      Object.defineProperty(target,key,{
        configurable:true,
        enumerable:!!enmuerable,
        get(){
          console.log('a')
          return value
        },
        set(newValue){
          console.log('b')
          value = newValue
        }
      })
    }
  //  let keys =  Object.keys(o).forEach((item,index)=>{
  //     defineReactive(o,item,o.item,true)
  //  });

    function ractify(o){
      let keys =Object.keys(o);
      for(let i =0;i<keys.length;i++){
        let key = keys[i];
        let value = o[key];
        // 判断属性 是不是引用类似，判断是不是数组
        // 如果是数组 就要循环数组 ，然后将数组里面的元素响应式化
        if(Array.isArray(value)){
          for(let j=0;j<value.length;j++){
            ractify(value[j])
          }
        } else {
          // 对象或值类型
          defineReactive(o,key,value ,true)
        }
      }
    }

    ractify(o)
 
  </script>
</html>